<!-- 地址列表 -->
<template>
	<view class="address-wrap">

		<view class="address-list" v-for="address in addressList" :key="address.id" @tap="useAddress(address)">
<!--      <u-checkbox shape="circle" active-color="#FC5351">-->
        <view class="detail">
          <image class="tag" v-show="address.is_default === '1'" src="@/static/images/shouye/Group2245.png"></image>
          {{ address.province_name }}{{ address.city_name }}{{ address.area_name }}{{ address.address }}
        </view>
        <view class="top u-flex">
          <text class="name">{{ address.consignee }}</text>
          <text class="phone">{{ address.phone.slice(0,3).concat("****",address.phone.slice(address.phone.length-4,address.phone.length))}}</text>
        </view>
        <image class="u-reset-button set-btn" src="@/static/images/shouye/edit.png" @tap.stop="jump('/pages/user/address/edit', { id: address.id })"></image>
<!--      </u-checkbox>-->
		</view>

		<view class="foot_box-wrap safe-area-inset-bottom">
			<view class="foot_box u-flex u-row-between safe-area-inset-bottom">
				<!-- 微信小程序和微信H5 -->
<!--				<button-->
<!--					class="u-reset-button sync-wxaddress u-m-20 u-flex u-row-center u-col-center"-->
<!--					@tap="getWXaddress"-->
<!--					v-show="platform == 'wxMiniProgram' || platform == 'wxOfficialAccount'"-->
<!--				>-->
<!--					<text class="u-iconfont uicon-weixin-fill u-p-r-10" style="color:#09bb07;font-size: 40rpx;"></text>-->

<!--					导入微信地址-->
<!--				</button>-->
				<button class="u-reset-button add-btn u-m-20" @tap="jump('/pages/user/address/edit')">新增收货地址</button>
			</view>
		</view>
	</view>
</template>

<script>
import Auth from '@/shopro/permission/index.js';
export default {
	components: {},
	data() {
		return {
			addressList: [],
			platform: this.$platform.get()
		};
	},
	computed: {},
	onLoad() {},
	onShow() {
		this.getAddressList();
	},
	methods: {
		// 选中
		useAddress(addressData) {
			uni.$emit('SELECT_ADDRESS', { addressData: JSON.stringify(addressData) });
			this.$Router.back();
		},
		// 路由跳转
		jump(path, parmas) {
			this.$Router.push({
				path: path,
				query: parmas
			});
		},
		// 微信导入
		getWXaddress() {
			let authState = new Auth('address').check();
			// #ifdef MP
			authState &&
				uni.chooseAddress({
					success: res => {
						this.jump('/pages/user/address/edit', { addressData: res });
					},
					fail: err => {
						console.log('%cuni.chooseAddress,调用失败', 'color:green;background:yellow');
					}
				});
			// #endif
			// #ifdef H5
			this.$wxsdk.openAddress(res => {
				this.jump('/pages/user/address/edit', { addressData: res });
			});
			// #endif
		},
		getAddressList() {
			this.$http('address.list').then(res => {
				if (res.code === 1) {
					this.addressList = res.data;
					!this.addressList.length && uni.$emit('SELECT_ADDRESS', { addressData: null });
				}
			});
		}
	}
};
</script>

<style lang="scss">
.address-list {
	padding: 40rpx;
	position: relative;
	background: #fff;
	margin-bottom: 20rpx;

	.name {
    margin-top: 25rpx;
		font-size: 28rpx;
    color: rgba(153, 153, 153, 1);
	}

	.phone {
		font-size: 28rpx;
		margin:  25rpx 20rpx 0;
    color: rgba(153, 153, 153, 1);
	}

	.tag {
		width: 52rpx;
    height: 28rpx;
    margin-right: 20rpx;
	}

	.detail {
		width: 543rpx;
		font-size: 30rpx;
    font-weight: 600;
		line-height: 40rpx;
	}

	.set-btn {
    width: 40rpx;
    height: 40rpx;
		position: absolute;
		font-size: 26rpx;
		top: 40rpx;
		right: 40rpx;
	}
}

// 底部按钮
.foot_box-wrap {
	height: 140rpx;
	width: 100%;
}
.foot_box {
	padding: 10rpx 20rpx;
	position: fixed;
	bottom: 0;
	left: 0;
	width: 100%;
  z-index: 10000;
	//background-color: #fff;
	border-top: 1rpx solid rgba(#ccc, 0.2);
	.sync-wxaddress {
		flex: 1;
		line-height: 80rpx;
		//background: rgba(255, 255, 255, 1);
		border-radius: 40rpx;
		box-shadow: 0 0 1rpx 6rpx rgba(#ccc, 0.2);
	}
	.add-btn {
		line-height: 80rpx;
		flex: 1;
		background: linear-gradient(90deg, #ff716f, #FE5F5D);
		border-radius: 40rpx;
		color: rgba(#fff, 0.9);
	}
}
</style>
